import React from 'react';
import {View, Button} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {
  createStackNavigator,
  StackNavigationProp,
  TransitionPresets,
} from '@react-navigation/stack';
import {RouteProp} from '@react-navigation/native';
import NumberSlider from './NumberSlider';

// ---- 页面参数类型 ----
type RootStackParamList = {
  Home: undefined;
  Detail: undefined;
};

// ---- 页面导航类型 ----
type HomeScreenNavigationProp = StackNavigationProp<RootStackParamList, 'Home'>;
type DetailScreenNavigationProp = StackNavigationProp<
  RootStackParamList,
  'Detail'
>;

// ---- 页面 Route 类型 ----
type HomeScreenRouteProp = RouteProp<RootStackParamList, 'Home'>;
type DetailScreenRouteProp = RouteProp<RootStackParamList, 'Detail'>;

// ---- 示例页面 ----
interface HomeProps {
  navigation: HomeScreenNavigationProp;
  route: HomeScreenRouteProp;
}
function HomeScreen({navigation}: HomeProps) {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: '#eef',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Button
        title="Go to Detail"
        onPress={() => navigation.navigate('Detail')}></Button>
    </View>
  );
}

interface DetailProps {
  navigation: DetailScreenNavigationProp;
  route: DetailScreenRouteProp;
}
function DetailScreen({navigation}: DetailProps) {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: '#fee',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <NumberSlider />
      <Button title="Go to Detail" onPress={() => navigation.goBack()}></Button>
    </View>
  );
}

// ---- Stack ----
const Stack = createStackNavigator<RootStackParamList>();

// ---- 最小 Navigator Demo ----
export default function App(): JSX.Element {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Home"
        screenOptions={{
          ...TransitionPresets.SlideFromRightIOS,
          gestureDirection: 'horizontal',
          gestureEnabled: true, // RN 手势
        }}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
